<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: () => ''
  },
  placeholder: {
    type: String,
    default: () => '请输入内容'
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  type: {
    type: String,
    default: () => 'text'
  },
  composite: {
    type: Array,
    default: () => []
  },
  maxlength: {
    type: Number,
    default: () => 1000000000000000
  }
})

const textInputRef = ref()

const emit = defineEmits(['update:modelValue'])

const inputValue = ref(props.modelValue ? props.modelValue : ('' as any))

const input = () => {
  emit('update:modelValue', inputValue.value)
}

const focus = () => {
  textInputRef.value.focus()
}

watch(
  () => props.modelValue,
  (val) => {
    inputValue.value = val
  }
)
</script>

<template>
  <el-input
    ref="textInputRef"
    v-model.trim="inputValue"
    :type="type"
    :placeholder="placeholder"
    :disabled="disabled"
    :show-password="type === 'password'"
    :maxlength="props.maxlength"
    clearable
    autocomplete="off"
    @input="input"
    @focus="focus"
  >
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
    <template #suffix>
      <slot name="suffix"></slot>
    </template>
    <template #prepend v-if="props.composite.includes('prepend')">
      <slot name="prepend"></slot>
    </template>
    <template #append v-if="props.composite.includes('append')">
      <slot name="append"></slot>
    </template>
  </el-input>
</template>

<style lang="scss" scoped></style>
